<div ng-form="favoriteQueryForm">
  <div class="modal-header ui-draggable-handle">
    <button type="button" class="close" ng-click="$dismiss()" aria-hidden="true" aria-label="Close">
      <span aria-hidden="true" class="fa fa-times"></span>
    </button>
    <div class="h3 modal-title" translate>Add Favorite Query</div>
  </div>

  <div class="modal-body">
    <div class="row">
      <div class="col-sm-12">
        <fieldset>
          <div class="form-group required"
               ng-class="{'has-error': favoriteQueryForm.name.$invalid && containerForm.name.$dirty}">
            <label class="control-label required" for="id_name" translate>Name</label>
            <span class="hz-icon-required fa fa-asterisk"></span>
            <div>
              <input class="form-control" id="id_name" ng-model="ctrl.model.name" maxlength="255"
                     name="name" type="text" ng-required="true" pattern="[^/]+">
            </div>
            <span class="help-block" ng-show="containerForm.name.$error.pattern" translate>
              Name must not contain "/".
            </span>
            <span class="help-block"
                  ng-show="containerForm.name.$error.required && containerForm.name.$dirty" translate>
              A name is required for your favorite.
            </span>
          </div>
        </fieldset>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="$dismiss()">
      <span class="fa fa-close"></span>
      <translate>Cancel</translate>
    </button>
    <button class="btn btn-primary"
            ng-click="$close(ctrl.model)"
            ng-disabled="favoriteQueryForm.$invalid">
      <span class="fa fa-plus"></span>
      <translate>Add</translate>
    </button>
  </div>
</div>
